import React, { Component } from 'react';

// const ThemeContext = React.createContext();
// // 也可以解构
const { Provider, Consumer } = React.createContext();

const Node = () => (
  <div style={{ border: '1px solid green', padding: 12 }}>
    Node
    <SubNode />
  </div>
);
const SubNode = () => (
  <div style={{ border: '1px solid blue', padding: 12 }}>
    SubNode
    <Consumer>{(value) => <div>{value}</div>}</Consumer>
    <Child />
  </div>
);

const Child = () => (
  <div style={{ border: '1px solid green', padding: 12 }}>
    Child
    <Consumer>
      {(value) => <div style={{ color: value }}>xxx,{value}</div>}
    </Consumer>
  </div>
);

export default class App extends Component {
  render() {
    return (
      <div style={{ border: '1px solid red', padding: 12 }}>
        <Provider value={'pink'}>
          <h1>我是App组件</h1>
          <Node />
        </Provider>
      </div>
    );
  }
}
